<script setup>
    import { ref } from 'vue'

    //是否可见，默认不可见
    const visible=ref(false)
</script>

<template>
  <h1>可折叠面板</h1>
  <!--  标题-->
    <div class="panel">
      <div class="title">
        <h2>自由与爱情</h2>
        <span class="btn" @click="visible=!visible">
          {{ visible ? '收起':'展开' }}
        </span>
      </div>

    <!--  主体区域-->
      <div
        class="container"
        v-show="visible">
        <p>生命诚可贵，</p>
        <p>爱情价更高。</p>
        <p>若为自由故，</p>
        <p>两者皆可抛。</p>
        </div>
    </div>
    
</template>


<style lang="scss">
  body{
    background:#ddd;
  }

  #app{
    width:400px;
    margin:20px auto;
    padding:1em 2em 2em;
    border:4px solid green;
    border-radius: 1em;
    box-shadow:3px 3px 3px rgba(0,0,0,0.5);
    background:#fff;
    h1{
      text-align:center;
    }
  }

  .panel{
    .title{
      display:flex;
      justify-content:space-between;
      align-items:center;
      border: 1px solid #ccc;
      padding:0 1em;
      h2{
        margin:0;
        line-height:2;
      }
      .btn{
        cursor:pointer;
      }
    }
    .container{
      border:1px solid #ccc;
      padding:0 1em;
      border-top-color:transparent;
    }
  }
</style>